import Image from 'next/image'
import Form from './components/form'
import { getTranslations } from 'next-intl/server'

import logo from '@/public/logo_colorful.png'

const Page: React.FC = async () => {
  const t = await getTranslations('message')
  return (
    <>
      <div className='relative flex flex-col lg:flex-row'>
        <div className='lg:max-w-[17.55rem] 2xl:max-w-[21.9375rem]'>
          <div className='relative w-[1.78125rem] h-[1.34375rem] lg:w-[2.375rem] lg:h-[1.8125rem] 2xl:w-[3.5625rem] 2xl:h-[2.6875rem]'>
            <Image src={logo} alt='logo' fill sizes='(max-width: 1024px) 7vw' />
          </div>
          <div className='h-[1.15625rem] lg:h-[1.75rem] 2xl:h-[2.625rem]'></div>
          <div className='text-[#999999] text-[0.875rem] leading-[1.375rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[1.75rem]'>
            {t('content')}
          </div>
          <div className='h-[1.9375rem] lg:h-[2.125rem]'></div>
          <div className='text-[0.75rem] leading-[1.0625rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[1.75rem]'>
            <div className='text-[#666666]'>{t('thankyou')}</div>
            <div className='text-[#999999]'>{t('forYourSupport')}</div>
          </div>
          <div className='h-[1.40625rem]'></div>
        </div>
        <div className='lg:w-[3.6rem] 2xl:w-[4rem]' />
        <Form
          contentLabel={t('contentLabel')}
          buttonLabel={t('submit')}
          placeholders={{
            name: t('namePlaceholder'),
            mobile: t('mobilePlaceholder'),
            email: t('emailPlaceholder'),
            content: t('contentPlaceholder'),
          }}
          modalTitle={t('modalTitle')}
          modalContent={t('modalContent')}
        />
      </div>
      <div className='h-[3rem] lg:h-[3.875rem]'></div>
    </>
  )
}

export default Page
